<template>
  <div>
    <div style="margin: 30px 30px;">
      <el-button type="primary" @click="handleButtonAdd()">+ 添加</el-button>
    </div>

    <div class="addBtn">
      <el-dialog title="添加" :visible.sync="dialogTableVisible">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="礼物名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item label="礼物图片">
            <el-upload
              v-if="dialogImageUrl==''"
              ref="uploadImg"
              action="https://api.zctj16888.com/admin/v1/image/ossUpload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              name="image"
              :on-success="handleAvatarSuccess"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <div v-else>
              <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
              <i class="el-icon-delete" @click="deleteImg" />
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="金额" prop="price">
            <el-input v-model="ruleForm.price" />
          </el-form-item>
          <el-form-item label="礼物描述" prop="description">
            <el-input v-model="ruleForm.description" />
          </el-form-item>
          <el-form-item label="SVGA动画">
            <el-upload
              v-if="dialogSvgaUrl==''"
              action="https://api.zctj16888.com/admin/v1/image/ossUpload"
              :on-success="handleSvgaSuccess"
              :show-file-list="false"
              name="image"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div v-else>
              <span>{{ dialogSvgaUrl }}</span>
              <el-button size="mini" type="primary" style="margin-left: 10px;" @click="previewSvga(dialogSvgaUrl)">预览</el-button>
              <i class="el-icon-delete" style="margin-left: 10px; cursor: pointer;" @click="deleteSvga" />
            </div>
          </el-form-item>
          <el-form-item label="阈值" prop="threshold">
            <el-input v-model="ruleForm.threshold" type="number" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择状态">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button @click="clickDelete">取消</el-button>
          <el-button type="primary" @click="clickConfirm">确认</el-button>
        </div>
      </el-dialog>

      <el-dialog title="修改" :visible.sync="modifyPopUp" :before-close="closeDialog">
        <el-form ref="modifyData" :model="modifyData" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="礼物名称" prop="name">
            <el-input v-model="modifyData.name" />
          </el-form-item>

          <el-form-item label="礼物图片">
            <el-upload
              v-if="dialogImageUrl==''"
              ref="uploadImg"
              action="https://api.zctj16888.com/admin/v1/image/ossUpload"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              name="image"
              :on-success="handleAvatarSuccess"
            >
              <i class="el-icon-plus" />
            </el-upload>
            <div v-else>
              <img style="width: 146px;height: 146px;" :src="dialogImageUrl">
              <i class="el-icon-delete" @click="deleteImg" />
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>

          <el-form-item label="金额" prop="price">
            <el-input v-model="modifyData.price" />
          </el-form-item>
          <el-form-item label="礼物描述" prop="description">
            <el-input v-model="modifyData.description" />
          </el-form-item>
          <el-form-item label="SVGA动画">
            <el-upload
              v-if="dialogSvgaUrl==''"
              action="https://api.zctj16888.com/admin/v1/image/ossUpload"
              :on-success="handleSvgaSuccess"
              :show-file-list="false"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <div v-else>
              <span>{{ dialogSvgaUrl }}</span>
              <el-button size="mini" type="primary" style="margin-left: 10px;" @click="previewSvga(dialogSvgaUrl)">预览</el-button>
              <i class="el-icon-delete" style="margin-left: 10px; cursor: pointer;" @click="deleteSvga" />
            </div>
          </el-form-item>
          <el-form-item label="阈值" prop="threshold">
            <el-input v-model="modifyData.threshold" type="number" />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select v-model="modifyData.status" placeholder="请选择状态">
              <el-option label="启用" :value="1" />
              <el-option label="禁用" :value="0" />
            </el-select>
          </el-form-item>
        </el-form>
        <div style="text-align: right;">
          <el-button @click="modifyCancel">取消</el-button>
          <el-button type="primary" @click="modifyConfirm">确认</el-button>
        </div>
      </el-dialog>

    </div>

    <el-table :data="tableData" style="width: 100%" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="name" label="礼物名称" align="center" />
      <el-table-column prop="description" label="礼物描述" align="center" />
      <el-table-column prop="logo" label="礼物封面" align="center">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" :src="scope.row.logo" fit="fill" />
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center" />
      <el-table-column prop="update_time" label="更新时间" align="center" />
      <el-table-column prop="price" label="金额" align="center" />
      <el-table-column prop="threshold" label="阈值" align="center" />
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'info'">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="svga" label="SVGA动画" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.svga" style="color: #409EFF; cursor: pointer; text-decoration: underline;" @click="previewSvga(scope.row.svga)">点击预览</span>
          <span v-else style="color: #999;">-</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <div style="margin-top: 10px;">
            <el-button type="primary" icon="el-icon-edit" circle @click="modifyVip(scope.row)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteVip(scope.row)" />
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { giftList, giftDelete, giftSave } from '../../../libs/api'
export default {
  data() {
    return {
      dialogManagementVisible: false,
      rules: {
        // name: [
        //     { required: true, message: '请输入名称', trigger: 'blur' },
        // ],
      },
      ruleForm: {},
      options: [{
        value: '选项1',
        label: '上架'
      }, {
        value: '选项2',
        label: '不上架'
      }],
      platformList: [{
        values: '选项1',
        label: 'H5'
      }, {
        values: '选项2',
        label: 'APP'
      }, {
        values: '选项3',
        label: '小程序'
      }],
      values: '',
      value: '',
      input: '',
      sortCard: '',
      content: '',
      dialogImageUrl: '',
      dialogSvgaUrl: '',
      dialogTableVisible: false,
      dialogVisible: false,
      managementData: [],
      // 总数据
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      fileList: [],
      pageSizes: [5, 10],
      typeStatus: '',
      vipLx: '',
      totalCount: 1,
      vipCardId: '',
      modifyPopUp: false,
      id: '',
      modifyData: {}
    }
  },
  created() {
    this.getVipCardList()
  },
  methods: {
    // 显示第几页
    handleCurrentChange(val) {
      console.log(this.vipCardId)
      // 改变默认的页数
      this.currentPage = val
      this.getVipUserList()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      console.log(val)
      this.PageSize = val
      // 改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1

      this.getVipUserList()
    },
    getVipUserList() {
      vipUserList({
        page: this.currentPage,
        limit: this.PageSize,
        vip_lx: this.vipLx,
        is_dq: this.typeStatus,
        id: this.vipCardId
      }).then(res => {
        console.log(res)
        this.managementData = res.data.list
        this.alltabData = res.data.list
        this.totalCount = res.data.total
      })
    },
    // 获取会员卡列表
    getVipCardList() {
      giftList({
        // page: this.currentPage,
        // limit: this.PageSize
      }).then(res => {
        console.log(res)
        this.tableData = res.data
      })
    },
    // 删除会员卡
    deleteVip(row) {
      this.$confirm('此操作将永久删除该礼物, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        giftDelete({
          id: row.id
        }).then(res => {
          console.log(res)
          this.getVipCardList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    modifyVip(row) {
      console.log(row)
      this.modifyData = row
      this.dialogImageUrl = row.logo || ''
      this.dialogSvgaUrl = row.svga || ''
      this.id = this.modifyData.id
      this.modifyPopUp = true
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleRemove(file, fileList) {
      console.log(fileList)
      console.log(file)
    },
    handleButtonAdd() {
      this.dialogTableVisible = true
    },
    clickDelete() {
      this.dialogTableVisible = false
      this.dialogImageUrl = ''
      this.dialogSvgaUrl = ''
      Object.assign(this.ruleForm, {
        name: '',
        description: '',
        price: '',
        threshold: '',
        status: 1
      })
    },
    closeDialog() {
      this.modifyPopUp = false
      this.dialogImageUrl = ''
      this.dialogSvgaUrl = ''
    },
    clickConfirm() {
      giftSave({
        name: this.ruleForm.name,
        description: this.ruleForm.description,
        logo: this.dialogImageUrl,
        price: this.ruleForm.price,
        svga: this.dialogSvgaUrl,
        threshold: this.ruleForm.threshold,
        status: this.ruleForm.status !== undefined ? this.ruleForm.status : 1
      }).then(res => {
        Object.assign(this.ruleForm, {
          name: '',
          description: '',
          price: '',
          threshold: '',
          status: 1
        })
        this.dialogImageUrl = ''
        this.dialogSvgaUrl = ''
        this.getVipCardList()
      })
      this.dialogTableVisible = false
    },
    modifyConfirm() {
      giftSave({
        name: this.modifyData.name,
        description: this.modifyData.description,
        logo: this.dialogImageUrl,
        price: this.modifyData.price,
        id: this.id,
        svga: this.dialogSvgaUrl,
        threshold: this.modifyData.threshold,
        status: this.modifyData.status !== undefined ? this.modifyData.status : 1
      }).then(res => {
        Object.assign(this.modifyData, {
          name: '',
          description: '',
          price: '',
          threshold: '',
          status: 1
        })
        this.dialogImageUrl = ''
        this.dialogSvgaUrl = ''
        this.id = ''
        this.getVipCardList()
      })
      this.modifyPopUp = false
    },
    modifyCancel() {
      this.modifyPopUp = false
      // Object.assign(this.modifyData,{
      //         name:'',
      //         description:'',
      //         price:'',
      //     })
      this.modifyData = {}
      this.dialogImageUrl = ''
      this.dialogSvgaUrl = ''
      this.id = ''
    },
    handleAvatarSuccess(res, file, fileList) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      console.log(res)
      console.log(URL.createObjectURL(file.raw))
      this.fileList = fileList
      this.ruleForm.img_url = res.data.url
      this.dialogImageUrl = res.data.url
      // this.ruleForm.img_url = URL.createObjectURL(file.raw)
    },
    deleteImg() {
      this.dialogImageUrl = ''
    },
    handleSvgaSuccess(res, file) {
      console.log(res)
      this.dialogSvgaUrl = res.data.url
    },
    deleteSvga() {
      this.dialogSvgaUrl = ''
    },
    previewSvga(svgaUrl) {
      if (svgaUrl) {
        const previewUrl = `/svga-preview.html?url=${encodeURIComponent(svgaUrl)}`
        window.open(previewUrl, '_blank')
      }
    }
  }
}
</script>

<style>
.tab {
    display: flex;
    align-items: center;
    margin: 30px 30px;
}

.tabSearch {
    display: flex;
}

.addBtn {
    margin-left: 30px;
    margin-bottom: 30px;
}
.ql-editor {

height: 300px;

}
</style>
